<template>
  <view>
    <u-navbar :bgColor="navbarBgColor" :leftIconColor="navTitleColor" auto-back>
      <template #center>
        <view class="flex-1 pl-40">
          <u-tabs
            :list="[{ name: '推荐' }, { name: '关注' }]"
            line-color="#6bc29a"
            :current="current"
            :active-style="{ color: navTitleColor }"
            :inactive-style="{ color: navTitleColor }"
            @change="changeNav"
          >
          </u-tabs>
        </view>
      </template>
    </u-navbar>
    <u-image
      width="750rpx"
      height="600rpx"
      src="https://haowallpaper.com/link/common/file/previewFileImg/786d50481e9c29b09d0ced4c83ca67f0786d50481e9c29b09d0ced4c83ca67f0"
    ></u-image>
    <view class="page-content">
      <view class="user-box">
        <u-image width="120rpx" height="120rpx"></u-image>
        <view class="text-14 mt-4">用户名称</view>
      </view>
      <u-gap height="120rpx"></u-gap>
      <view class="px-16 flex-col">
        <template v-for="item in contentList">
          <MomentNewItem :itemData="item" @toComment="toInput"></MomentNewItem>
        </template>
      </view>
    </view>
    <view class="tabbar" @touchmove.stop.prevent="stopRoll">
      <view
        class="tabbar-content u-border-top"
        :style="{
          bottom:
            keyboardHeight > 0 ? 'calc(' + keyboardHeight + 'px - 1px)' : 0,
        }"
      >
        <view class="tabbar-input flex col-center px-12 py-8" v-if="isInput">
          <view class="input flex-1 rela">
            <textarea
              class="input-inner"
              :auto-height="true"
              v-model="message"
              placeholder="评论"
              maxlength="-1"
              :cursor-spacing="17"
              :adjust-position="false"
              :focus="inputFocus"
              @blur="inputBlur"
              @input="onInput"
            />
          </view>
          <view class="confirm-btn ml-14" v-if="isChangeInput">
            <u-button
              color="#6cc599"
              text="发送"
              @touchend.stop="submitComment"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import MomentNewItem from "@/subpages/components/momentNewItem/index.vue";
export default {
  components: {
    MomentNewItem,
  },
  data() {
    return {
      isInput: false,
      isChangeInput: false,
      message: "",
      inputFocus: true,
      navbarBgColor: "transparent",
      navTitleColor: "#fff",
      current: 0,
      keyboardHeight: 0,
      contentList: [],
    };
  },
  methods: {
    inputBlur() {
      this.isInput = false;
    },
    onInput(e) {
      if (e?.detail?.cursor > 0) {
        this.isChangeInput = true;
      } else {
        this.isChangeInput = false;
      }
    },
    submitComment() {
      console.log("发送评论");
    },
    toInput() {
      this.isInput = !this.isInput;
    },
    stopRoll() {},
    onPageScroll(e) {
      if (e.scrollTop > 44 && this.navbarBgColor === "transparent") {
        this.navbarBgColor = "#f5f6f7";
        this.navTitleColor = "#333333";
      }
      if (e.scrollTop < 44) {
        this.navbarBgColor = "transparent";
        this.navTitleColor = "#fff";
      }
    },
    changeNav({ index }) {
      this.current = index;
    },
    getContentList() {
      setTimeout(() => {
        this.contentList = Array.from({ length: 10 }).map((item, index) => {
          return {
            content:
              "这里是一个关于高定服饰的频道，在这里，你可以看到高定服饰的动态高定服饰的动态，高定服饰的动态，高定服饰的动态，高定服饰的动态，高定服饰的动态，高定服饰的动态，高定服饰的动态",
          };
        });
      }, 300);
    },
  },
  onLoad() {
    this.getContentList();
  },
  onReady() {
    let sysInfo = uni.getSystemInfoSync();
    let heightDiff = sysInfo.screenHeight - sysInfo.windowHeight;
    const barHeight = sysInfo.statusBarHeight;
    uni.onKeyboardHeightChange((res) => {
      const platform = uni.getStorageSync("platform");

      console.log("键盘高度", heightDiff);
      if (platform === "ios") {
        this.keyboardHeight = res.height - heightDiff + barHeight;

        console.log("软键盘高度", res.height);
      } else {
        this.keyboardHeight = res.height;
      }

      if (res.height === 0) {
        this.focus = false;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  position: relative;
  .user-box {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    top: -60rpx;
    padding-right: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

.tabbar {
  height: calc(74rpx + env(safe-area-inset-bottom));

  .tabbar-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10072;
    transition: all 0.3s;

    .input {
      background: #f6f7f9;
      border-radius: 8px;
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      line-height: 1.4;
    }

    .input-inner {
      font-size: 28rpx;
      max-height: 250rpx;
      width: auto;
    }

    .confirm-btn {
      width: 120rpx;
      line-height: 74rpx;
    }
  }
}
</style>
